<template>
  <div class="pageManage">
    <!-- 表单 -->
    <el-form ref="searchForm" :model="search" style="padding: 24px 12px">
      <!-- 输入框 -->
      <div class="form">
        <el-form-item
          label="名称"
          style="padding-left: 12px; padding-right: 12px"
          class="formitem"
          prop="title"
        >
          <el-input v-model="search.title" placeholder="请输入页面名称" />
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
          style="padding-left: 12px; padding-right: 12px"
          class="formitem"
        >
          <el-select v-model="search.status">
            <el-option value="publish" label="已发布" />
            <el-option value="draft" label="草稿" />
          </el-select>
        </el-form-item>
      </div>
      <!-- 按钮 -->
      <div class="button">
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      page: 1,
      pageSize: 4,
      search: {
        title: '',
        status: ''
      }
    }
  },
  computed: {
    // ...mapState({
    //   pageList: (state) => state.page.pageList,
    // }),
  },
  created() {
    this.getPageList({
      page: this.page,
      pageSize: this.pageSize
    })
  },
  methods: {
    ...mapActions({
      getPageList: 'page/getpageList'
    }),
    resetForm() {
      console.log('重置')
      for (const key in this.search) {
        this.search[key] = ''
      }
    },
    async submitForm() {
      const options = {}
      for (const key in this.search) {
        this.search[key] && (options[key] = this.search[key])
      }
      // console.log(options);
      await this.getPageList({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.pageManage {
  padding: 24px;
  overflow: auto;
  background-color: #e7eaee;
  box-sizing: border-box;
}
.form {
  display: flex;
  flex-flow: row wrap;
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 0px;
}
.el-form {
  background-color: #fff;
  margin-bottom: 16px;
}
.formitem {
  display: flex;
}
.button {
  display: flex;
  justify-content: flex-end;
}
</style>
